<template>
  <div class="row-right">
    <a-tabs @change="onTabChange" v-model:activeKey="activeKey">
      <a-tab-pane v-for="opt in tabs" :key="opt.value">
        <template #tab>
          <span class="tab-title">{{ opt.label }}</span>
        </template>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>import { defineComponent, ref, toRefs, watch } from 'vue'

export default defineComponent({
  name: 'CircleTab',
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    activeKey: {
      type: String,
      required: true
    },
    change: {
      type: Function,
      default: () => {}
    }
  },
  setup(props, { emit }) {
    const { activeKey: externalActiveKey, change } = toRefs(props)
    const internalActiveKey = ref(externalActiveKey.value)
    // Watch for changes to externalActiveKey and update internalActiveKey
    watch(externalActiveKey, (newValue) => {
      internalActiveKey.value = newValue
      change.value(newValue)
    })

    // Watch for changes to internalActiveKey and emit them to the parent component
    watch(internalActiveKey, (newValue) => {
      emit('update:activeKey', newValue)  // Emitting the new activeKey value
    })

    const onTabChange = (key) => {
      internalActiveKey.value = key
      console.log('output-> activeKey.value::: ', internalActiveKey.value)
    }

    return {
      activeKey: internalActiveKey,
      onTabChange
    }
  }
})
</script>

<style lang="less" scoped>
.row-right {
  display: flex;
  align-items: center;
  width: 188px;
  height: 38px;
  border-radius: 8px;
  padding: 4px;
  background-color: #eeeff2;
  border: 0.5px solid rgba(255, 255, 255, 1);
}

:deep(.ant-tabs-ink-bar) {
  display: none !important; /* 移除下划线 */
}

:deep(.ant-tabs-tab-active) {
  .tab-title {
    height: 28px;
    border-radius: 16px;
    padding: 4px 16px;
    background: #fff;
    box-shadow: 0px 0px 1px 0px rgba(15, 34, 67, 0.16);
  }
}

:deep(.ant-tabs-nav) {
  margin: 0 !important;
}

:deep(.ant-tabs-tab) {
  margin: 0 0 0 12px !important;
}

.tab-title {
  height: 28px;
  border-radius: 16px;
  padding: 4px 16px;
  background: #eeeff2;
  box-shadow: 0px 0px 1px 0px rgba(15, 34, 67, 0.16);
}
</style>
